window.onload = function () {
    for(var j=0;j<12;++j){
        var oDiv0 = document.getElementsByClassName('box')[j];
        oDiv0.style.width = '200px';
        var aSpan = oDiv0.getElementsByTagName('span');
        for (var i = 0; i < aSpan.length; i++) {
            dragFn(aSpan[i],oDiv0);
        }
    }

    var add=document.getElementById('videold');
    $("#videold").click(function(){
        var html = '<div class="section ui-widget-content box0"><input class="upload box0" type="file" onchange=onUpload2(this.files[0])><div class="box0 preview"></div></div>';
        $(document.body).append(html);
        $( ".section" ).draggable();
        $( ".section" ).resizable();
    });
    var t=2;
    //var sec=document.getElementsByClassName
    // $(".section").click(function(){
    // //    alert(this);
    //     this.style.zIndex=t;
    //     t++;
    // });
    $(".box0").click(function(){
        // alert(this);
        this.style.zIndex=t;
        t++;
    });

    function dragFn(obj,oDiv) {
        obj.onmousedown = function (ev) {
            var oEv = ev || event;

            var oldWidth = oDiv.offsetWidth;
            var oldHeight = oDiv.offsetHeight;
            var oldX = oEv.clientX;
            var oldY = oEv.clientY;
            var oldLeft = oDiv.offsetLeft;
            var oldTop = oDiv.offsetTop;

            document.onmousemove = function (ev) {
                var oEv = ev || event;

                if (obj.className == 'tl') {
                    oDiv.style.width = oldWidth - (oEv.clientX - oldX) + 'px';
                    oDiv.style.height=oldHeight-(oEv.clientY-oldY)+'px';
                    oDiv.style.left = oldLeft + (oEv.clientX - oldX) + 'px';
                    oDiv.style.top = oldTop + (oEv.clientY - oldY) + 'px';
                }
                else if (obj.className == 'bl') {
                    oDiv.style.width = oldWidth - (oEv.clientX - oldX) + 'px';
                    oDiv.style.height=oldHeight+(oEv.clientY-oldY)+'px';
                    oDiv.style.left = oldLeft + (oEv.clientX - oldX) + 'px';
                    oDiv.style.bottom = oldTop + (oEv.clientY + oldY) + 'px';
                }
                else if (obj.className == 'tr') {
                    oDiv.style.width = oldWidth + (oEv.clientX - oldX) + 'px';
                    oDiv.style.height = oldHeight - (oEv.clientY - oldY)+'px';
                    oDiv.style.right = oldLeft - (oEv.clientX - oldX) + 'px';
                    oDiv.style.top = oldTop + (oEv.clientY - oldY) + 'px';
                }
                else if (obj.className == 'br') {
                    oDiv.style.width = oldWidth + (oEv.clientX - oldX) + 'px';
                    oDiv.style.height = oldHeight + (oEv.clientY - oldY)+'px';
                    oDiv.style.right = oldLeft - (oEv.clientX - oldX) + 'px';
                    oDiv.style.bottom = oldTop + (oEv.clientY + oldY) + 'px';
                }
                else if (obj.className == 't') {
                    oDiv.style.height=oldHeight-(oEv.clientY-oldY)+'px';
                    oDiv.style.top = oldTop + (oEv.clientY - oldY) + 'px';
                }
                else if (obj.className == 'b') {
                    oDiv.style.height = oldHeight + (oEv.clientY - oldY)+'px';
                    oDiv.style.bottom = oldTop - (oEv.clientY + oldY) + 'px';
                }
                else if (obj.className == 'l') {
                    oDiv.style.height = oldHeight + 'px';
                    oDiv.style.width = oldWidth - (oEv.clientX - oldX) + 'px';
                    oDiv.style.left = oldLeft + (oEv.clientX - oldX) + 'px';
                }
                else if (obj.className == 'r') {
                    oDiv.style.height = oldHeight + 'px';
                    oDiv.style.width = oldWidth + (oEv.clientX - oldX) + 'px';
                    oDiv.style.right = oldLeft - (oEv.clientX - oldX) + 'px';
                }
            };

            document.onmouseup = function () {
                document.onmousemove = null;
            };
            return false;
        };
    }
};

$(function() {
    $( ".draggable" ).draggable({ cancel: "span" });
});